import { useState } from 'react';
import './Concepts.css';
import Jsx from './children/Jsx';
import RefTest from './children/RefTest';
import PropsFather from './children/PropsFather';
import StateTest from './children/StateTest';
import HooksTest from './children/HooksTest';
import ContextTest from './children/ContextTest';
import Components from './children/Components';

const Concepts = () => {
  const [activeTab, setActiveTab] = useState('jsx');
  const tabs = [
    { id: 'jsx', title: 'JSX语法', component: <Jsx></Jsx> },
    { id: 'components', title: '组件', component: <Components></Components> },
    { id: 'ref', title: 'Ref', component: <RefTest></RefTest> },
    { id: 'props', title: 'Props', component: <PropsFather></PropsFather> },
    { id: 'state', title: 'State', component: <StateTest></StateTest> },
    { id: 'hooks', title: 'Hooks', component: <HooksTest></HooksTest> },
    { id: 'context', title: 'Context API', component: <ContextTest></ContextTest> },

  ];

  return (
    <div className="concepts">
      <div className="concepts-header">
        <h1>React核心概念</h1>
        <p>掌握这些核心概念是学习React的基础</p>
      </div>

      <div className="tabs-container">
        <div className="tabs">
          {tabs.map(tab => (
            <button
              key={tab.id}
              className={`tab ${activeTab === tab.id ? 'active' : ''}`}
              onClick={() => setActiveTab(tab.id)}
            >
              {tab.title}
            </button>
          ))}
        </div>

        <div className="tab-content">
          {tabs
            .filter(tab => tab.id === activeTab)
            .map(tab => (
              <div key={tab.id}>{tab.component}</div>
            ))}
        </div>
      </div>
    </div>
  );
};

export default Concepts;
